<template>
  <div class="pagebox">
    <crumbs @goBack="goBack" :superiorMenu="['生产']" currentMenu="报工工作台"></crumbs>
    <div class="title">
      <div class="title-box">报工工作台</div>
      <div class="title-tip">请将输入法切换为英文再使用扫码枪操作</div>
      <div class="icon-right">
        <a-icon class="title-icon" @click="changeFullScreen" type="fullscreen" />
      </div>
    </div>
    <div class="card">
      <div class="card-left">
        <div class="card-title">生产任务</div>
        <div class="card-content" style="padding-right: 10px">
          <div class="c-card" v-for="item in ListBirth" :key="item.id">
            <div class="c-title">{{ item.orderCode || '-' }}</div>
            <div class="c-yang">{{ item.serialName || '-' }}</div>
            <div class="c-yang">{{ item.processesName || '-' }}</div>
            <div class="c-yang">{{ item.planProduceNum || '-' }}</div>
            <div class="c-yang">{{ item.timePeriod || '-' }}</div>
          </div>
        </div>
      </div>
      <div class="card-centent">
        <div class="card-title">快速报工</div>
        <div class="card-content">
          <a-form-model :model="formData" ref="ruleForm" :rules="rules">
            <a-form-model-item label="工单编号" prop="orderCode">
              <a-input
                @click="outopenIt"
                v-model="formData.orderCode"
                placeholder="请选择"
                :read-only="true"
                :class="formData.orderCode ? 'has-value' : ''"
              >
                <a-icon slot="suffix" type="down" style="color: #cdcdcd; font-size: 12px" class="down-icon" />
                <a-icon
                  slot="suffix"
                  type="close-circle"
                  theme="filled"
                  class="close-icon"
                  @click="getSaleSelectValue(false, '', [])"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item label="工序" prop="taskId">
              <a-select style="width: 100%" v-model="formData.taskId" @change="changeProcess" placeholder="请选择">
                <a-select-option v-for="item in processesList" :value="item.taskId" :key="item.taskId">
                  {{ item.processesName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="操作人" prop="userId">
              <j-select-user-by-dep v-model="formData.userId" @changeRow="onChangeUser"></j-select-user-by-dep>
            </a-form-model-item>
            <a-form-model-item label="合格数" prop="qualifiedNum">
              <a-input
                style="ime-mode:active"
                :value="formData.qualifiedNum"
                @change="inputChange"
                placeholder="请选择"
                allow-clear
                :maxLength="9"
              />
            </a-form-model-item>
            <a-form-model-item label="不合格数">
              <a-input :value="unqualifiedString" @click="selectNonconformingItem" />
            </a-form-model-item>
            <a-form-model-item label="报工时间" prop="reportTime">
              <a-date-picker
                style="width: 100%"
                v-model="formData.reportTime"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
              />
            </a-form-model-item>
          </a-form-model>
          <a-form :form="formobj" ref="forms">
            <a-col v-for="(p, index) in formTypeExtendedFields" :key="index">
              <a-form-item :required="p.fieldMust == 2">
                <span slot="label">{{ p.fieldName + '：' }}</span>
                <a-input
                  :disabled="p.fieldMust == 1"
                  :placeholder="p.placeholder"
                  v-if="p.fieldType == 1"
                  v-decorator="[
                    'extDataJson.' + p.fieldKey,
                    { rules: [{ required: p.fieldMust == 2, message: '请输入内容' }] },
                  ]"
                >
                  <a-tooltip v-if="p.explanationPrompt" slot="suffix" :title="p.explanationPrompt">
                    <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </a-input>

                <a-textarea
                  :disabled="p.fieldMust == 1"
                  :placeholder="p.placeholder"
                  v-decorator="[
                    'extDataJson.' + p.fieldKey,
                    { rules: [{ required: p.fieldMust == 2, message: '请输入内容' }] },
                  ]"
                  v-if="p.fieldType == 2"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                >
                  <a-tooltip v-if="p.explanationPrompt" slot="suffix" :title="p.explanationPrompt">
                    <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </a-textarea>

                <a-input-number v-if="p.fieldType == 4" :step="0.0001" style="width: 100%" :disabled="p.fieldMust == 1"
                  :placeholder="p.placeholder" :min="0.0001" :max="getMaxValueForDigits(p.fieldLength * 1)" v-decorator="[
                  'extDataJson.' + p.fieldKey,
                  { rules: [{ required: p.fieldMust == 2, message: '请输入内容' }] },
                ]" :formatter="(value) => onInput(value)" />

                <a-input-number
                  :formatter="(value) => value.substr(0, p.fieldLength)"
                  :parser="(value) => value.substr(0, p.fieldLength)"
                  :min="0"
                  :precision="0"
                  style="width: 100%;"
                  :disabled="p.fieldMust == 1"
                  :placeholder="p.placeholder"
                  v-if="p.fieldType == 3"
                  v-decorator="[
                    'extDataJson.' + p.fieldKey,
                    { rules: [{ required: p.fieldMust == 2, message: '请输入内容' }] },
                  ]"
                >
                  <a-tooltip v-if="p.explanationPrompt" slot="suffix" :title="p.explanationPrompt">
                    <a-icon type="info-circle" style="color: rgba(0, 0, 0, 0.45)" />
                  </a-tooltip>
                </a-input-number>
              </a-form-item>
            </a-col>
          </a-form>
        </div>

        <div class="centent-btn" v-if="hasButton('productOrderTable:controls')">
          <a-button style="width: 119px; height: 54px" @click="clearnBtn">清空</a-button>
          <a-button :loading="loading" @click="onSubmit" style="width: 400px; height: 54px" type="primary">
            提交
          </a-button>
        </div>
      </div>
      <div class="card-right">
        <div class="card-title">今日报工</div>
        <div class="card-content" style="padding-right: 10px">
          <div class="c-card" v-for="item in todayList" :key="item.id">
            <div class="c-title">{{ item.reportTime }}</div>
            <div class="c-yang">{{ item.createByText }}</div>
            <div class="c-yang">合格数：{{ item.qualifiedNum }} 不合格数：{{ item.unqualifiedNum }}</div>
            <div class="c-yang">{{ item.processesName }}</div>
            <div class="c-yang">{{ item.orderCode }}</div>
            <div class="c-yang">{{ item.serialName }}</div>
          </div>
        </div>
      </div>
      <div></div>
      <div></div>
    </div>
    <!--不合格项弹窗-->
    <a-modal v-model="nonConformanceVisible" title="不合格数输入" @ok="handleOk">
      <a-table
        row-key="nonconformityId"
        :columns="disqualificationColumns"
        :pagination="false"
        :dataSource="disqualificationData"
      >
        <div slot="index" slot-scope="text, record, index">
          {{ index + 1 }}
        </div>
        <div slot="nonconformityNum" slot-scope="text, record">
          <a-input
            @input="changeConformityNum(record.nonconformityNum, record)"
            v-model="record.nonconformityNum"
            placeholder="请输入"
          />
        </div>
      </a-table>
      <template slot="footer">
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div>
            <span>不合格原因：{{ unqualifiedRows }}</span
            >，
            <span>不合格数：{{ unqualifiedNumber }}</span>
          </div>
          <div>
            <a-button key="back" @click="handleCancel"> 取消</a-button>
            <a-button key="submit" type="primary" :loading="loadingSubmit" @click="handleOk"> 确定</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <goodsTableSelect ref="SaleSelect" @getSelectValue="getSaleSelectValue" :key="Selectindex"></goodsTableSelect>

    <PDA-Sao ref="pdaSao" :saoparams="saoparams" @changeScan="changeScan"></PDA-Sao>
  </div>
</template>

<script>
import goodsTableSelect from '@/components/goodsTableSelect'
import createFormItem from '@/components/createForm.vue'
import crumbs from '@/components/crumbs.vue'
import { initdata, taskListApi, todaydata } from '@/api/productOrder'
import { columnshand } from './allColumn'
import { unqualifiedList } from '@/api/quality/index'
import { APILX } from '@/api/requestLx'
import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
import { clearNoNum } from '@/utils/util'
import moment from 'moment'
import PDASao from './PDASao.vue'
import {
  productionReportingAdd,
  processDetail,
  workOrdequeryById,
  getFileListByIds,
} from '@/api/produce/productionManage'
import {hasButton} from '@/utils/hasPermission'

export default {
  components: {
    crumbs,
    JAreaLinkage,
    goodsTableSelect,
    createFormItem,
    PDASao,
  },
  data() {
    return {
      formobj: this.$form.createForm(this, { name: 'coordinated' }),
      columnshand,
      loadingSubmit: false,
      loading: false,
      nonConformanceVisible: false,
      disqualificationData: [],
      formTypeExtendedFields: [],
      disqualificationColumns: [
        {
          title: '序号',
          ellipsis: true,
          dataIndex: 'index',
          scopedSlots: {
            customRender: 'index',
          },
        },
        {
          title: '不合格原因',
          ellipsis: true,
          dataIndex: 'unqualifiedName',
        },
        {
          title: '数量',
          dataIndex: 'nonconformityNum',
          scopedSlots: {
            customRender: 'nonconformityNum',
          },
        },
      ],
      planProduceNum: 0,
      formData: {
        orderCode: '',
        showOrderId:'',
        taskId: undefined,
        userId: '',
        reportTime: moment(new Date).format('YYYY-MM-DD HH:mm:ss'),
        qualifiedNum: '',
        unqualifiedQuantityNum: 0,
        unqualifiedDtos: [],
      },
      rules: {
        orderCode: [{ required: true, message: '请输入工单编号', trigger: 'change' }],
        taskId: [{ required: true, message: '请选择工序', trigger: 'blur' }],
        userId: [{ required: true, message: '请选择操作人', trigger: 'change' }],
        reportTime: [{ required: true, message: '请选择报工时间', trigger: 'change' }],
        qualifiedNum: [{ required: true, message: '请输入合格数', trigger: ['blur', 'change'] }],
        unqualifiedQuantityNum: [{ required: true, message: '请输入不合格数', trigger: 'blur' }],
      },
      processesList: [],
      Selectindex: 0,
      ListBirth: [],
      todayList: [],
      form: '',
      numAll: 0,
      fullscreen: false,
      PDAshow: false,
      saoparams: {},
    }
  },
  computed: {
    // 不合格项数量
    unqualifiedNumber() {
      console.log('this.disqualificationData')
      return this.disqualificationData && this.disqualificationData.length > 0
        ? this.disqualificationData.reduce((num, item) => num + (Number(item.nonconformityNum) || 0), 0)
        : 0
    },
    // 不合格项项
    unqualifiedRows() {
      return this.disqualificationData.filter((item) => item.nonconformityNum).length
    },
    unqualifiedString() {
      if (!this.formData.unqualifiedDtos.length) {
        return ''
      }

      // 如果清空了数据，需要清除formData的不合格原因
      if(this.disqualificationData.every(item=>!item.nonconformityNum)){
        this.formData.unqualifiedQuantityNum = ''
        this.formData.unqualifiedDtos = []
        return ''
      }

      const totalNum = this.formData.unqualifiedDtos.reduce((total, item) => {
        return total + Number(item.nonconformityNum)
      }, 0)

      const reasonArr = this.formData.unqualifiedDtos.map((item) => {
        return `${item.unqualifiedName}: ${item.nonconformityNum}`
      })

      return `总数: ${totalNum}，${reasonArr.join('， ')}`
    },
  },
  watch: {
    'jkeForm.visible': function (val) {
      if (!val) {
        this.cancel()
      }
    },
    'formData.unqualifiedQuantityNum': function (val) {
      this.formData.num = (this.formData.qualifiedNum || 0) + (val || 0) || ''
    },
    'formData.qualifiedNum': function (val) {
      this.formData.num = (val || 0) + (this.formData.unqualifiedQuantityNum || 0) || ''
    },
  },
  created() {
    this.init()
    this.initData()
    this.formTypeExtendedFieldList()
  },
  mounted() {
    // this.PDAshow = true
  },
  methods: {
    onInput(event) {
      let value = event + ''
      // 截断小数点后超过4位的部分
      if (value.includes('.')) {
        let parts = value.split('.')
        if (parts[1].length > 4) {
          value = parts[0] + '.' + parts[1].substring(0, 4)
        }
      } else {
        value = event
      }
      return value
    },
    getMaxValueForDigits(digitCount) {
      if (digitCount <= 0) {
        throw new Error('Digit count must be a positive integer.')
      }
      return (Math.pow(10, digitCount) - 1) + 0.9999
    },
    hasButton,
    changeConformityNum(value, record) {
      if (value) {
        let num = clearNoNum(value)
        record.nonconformityNum = num
      }
    },
    changeScan(data, opratorType) {
      let EntityType = data.EntityType
      if (EntityType === 'workOrder') {
        this.processesList = [] // 工单编号有变化时清空工序字段的内容
        this.formData.taskId = undefined
        this.formData.qualifiedNum = ''
        //工单码
        workOrdequeryById({ id: data.id }).then((res) => {
          if (res.code == 200) {
            // 判断工单是否为“生产中”状态
            // 若判断为是，则把工单编号回显到当前表单。若判断不是“生产中”状态，则toast提示“工单状态不正确”；
            if (res.result.orderStatus == 1) {
              this.formData.orderCode = res.result.orderCode
              this.formData.taskId = res.result.taskId
              this.getTaskList(data.id)
              this.$refs.ruleForm.validateField('orderCode')
              this.$refs.ruleForm.validateField('taskId')
            } else {
              this.formData.orderCode = ''
              this.$antdMessage.error('工单状态不正确')
            }
          } else {
            this.$antdMessage.error(res.message)
          }
        })
      } else if (EntityType === 'productTask') {
        //任务二维码
        // 判断当前生产任务对应的生产工单状态是否为“生产中”
        // 若判断为是，则把工单编号、工序进行回显，且把对应的可报工数回显到合格数字段。若判断不是“生产中”状态，则toast提示“工单状态不正确”；
        this.processesList = [] // 工单编号有变化时清空工序字段的内容
        this.formData.taskId = undefined
        this.formData.qualifiedNum = ''
        getFileListByIds({
          id: data.id,
        }).then((res) => {
          if (res.code == 200) {
            console.log('res.result', res.result)
            // 判断工单是否为“生产中”状态
            // 若判断为是，则把工单编号回显到当前表单。若判断不是“生产中”状态，则toast提示“工单状态不正确”；
            if (res.result.orderStatus == 1) {
              this.formData.orderCode = res.result.orderCode
              this.formData.taskId = res.result.id
              this.processesList = [
                {
                  taskId: res.result.id,
                  processesName: res.result.processesName,
                },
              ]
            } else {
              this.formData.orderCode = ''
              this.$antdMessage.error('工单状态不正确')
            }
            this.$refs.ruleForm.validateField('orderCode')
            this.$refs.ruleForm.validateField('taskId')
          } else {
            this.$antdMessage.warning(res.message)
          }
        })
      }
      else if (!EntityType && (!isNaN(data) || data === '.')) {
        // 数字条码
        // 若扫到数字条码或者小数点，则把数字条码回显到合格数框，多次扫数字条码则自动拼接。
        if (data === '.' && this.formData.qualifiedNum.includes('.')) {
          this.$antdMessage.error('数字条码中只能有一个小数点');
          return;
        }

        if (this.formData.qualifiedNum > 0 || this.formData.qualifiedNum === '0') {
          let str = this.formData.qualifiedNum + '';
          let addStr = data + '';
          this.formData.qualifiedNum = str + addStr;
        } else {
          this.formData.qualifiedNum = data + '';
        }

        // 限制为 9 位字符
        this.formData.qualifiedNum = this.formData.qualifiedNum.substring(0, 9);
        this.$refs.ruleForm.validateField('qualifiedNum');
      }

       else if (EntityType === 'printTask' && data.userid) {
        // 感觉不是很灵敏
        if (data.userid === 'userClear') {
          this.clearnBtn();
          return;
        }
        //用户二维码
        // 扫用户二维码，则把用户回显到操作人字段，扫一个用户二维码则回显一个，多个姓名之间用“，”隔开。
        // 若扫到重复的用户二维码则toast提示“该用户已存在”。
        let users = this.formData.userId.split(',')
        if (!users.includes(data.userid) && this.formData.userId) {
          this.formData.userId = this.formData.userId + ',' + data.userid
        } else if (!users.includes(data.userid) && !this.formData.userId) {
          this.formData.userId = data.userid
        } else {
          this.$antdMessage.warning('该用户已存在')
        }
        this.$refs.ruleForm.validateField('userId')
      } else if (!EntityType) {
        this.$antdMessage.error('请扫正确的二维码')
      }
    },
    getTaskList(id) {
      taskListApi({
        pageNo: 1,
        pageSize: 999,
        type: 'production',
        orderId: id,
      }).then((res) => {
        if (res.success) {
          console.log('222222', res.result.records)
          this.processesList = res.result.records.map((item) => {
            return {
              taskId: item.id,
              processesName: item.processesName,
            }
          })
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    changeFullScreen() {
      const element = document.documentElement
      // 如果是全屏状态
      if (this.fullscreen) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        // 如果浏览器有这个Function
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      }
      // 判断全屏状态的变量
      this.fullscreen = !this.fullscreen
    },
    async formTypeExtendedFieldList() {
      let res = await APILX.formTypeExtendedFieldList({ formType: 4 })
      console.log(res, 'resss')
      if (res.code == 200 && res.result) {
        this.formTypeExtendedFields = res.result
      }
    },
    goBack() {},
    clearnBtn() {
      this.formData = {
        orderCode: '',
        taskId: undefined,
        userId: '',
        reportTime: '',
        qualifiedNum: '',
        unqualifiedQuantityNum: 0,
        unqualifiedDtos: [],
      }
      this.unqualifiedNumber = ''
      this.planProduceNum = ''
      this.$refs.forms.form.resetFields()
      this.$refs.ruleForm.resetFields()

      // 添加重置不合格理由中数值
      this.disqualificationData.forEach((item)=>{
        return item.nonconformityNum = ''
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.$refs.forms.form.validateFields(async (err, values) => {
            if (!err) {
              this.loading = true
              let form = {
                qualifiedNum: this.formData.qualifiedNum,
                reportTime: moment(this.formData.reportTime).format('YYYY-MM-DD HH:mm:ss'),
                taskId: this.formData.taskId,
                unqualifiedNum: this.formData.unqualifiedQuantityNum,
                userId: this.formData.userId,
                produceOrderReportWorkNonconformityDetail: this.formData.unqualifiedDtos,
              }
              form.extDataJson = values.extDataJson
              const { code, message, } = await productionReportingAdd(form)
              if (code === 200) {
                this.$antdMessage.success('快速报工成功')
                this.disqualificationData.forEach((item) => {
                  return item.nonconformityNum = ''
                })
                let { result, code } = await processDetail({ id: this.formData.taskId })
                this.formData.qualifiedNum = Math.max(0, result.reportWorkNum)
                this.formData.reportTime = moment().format('YYYY-MM-DD HH:mm:ss')
                this.init()
              } else {
                this.$antdMessage.error(message)
              }
              this.loading = false
            } else {
              return false
            }
          })
        } else {
          return false
        }
      })
    },
    async initData() {
      const {
        result: { records },
      } = await unqualifiedList({ pageNo: 1, pageSize: 100000 })
      console.log(records)
      this.disqualificationData = (records || []).map((item, index) => ({
        nonconformityNum: '',
        nonconformityId: item.id,
        unqualifiedName: item.nonconformityDescribe,
        index: index + 1,
      }))
    },
    inputChange(e) {
      let newValue = e.target.value;

      // 使用正则表达式限制输入的数字为最多9位整数，小数点后最多4位
      newValue = newValue
        .replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        .replace(/^\./, '') // 如果输入以“.”开头，替换为空
        .replace(/\.{2,}/, '.') // 保证只能有一个“.”
        .replace(/^(\d+)\.(\d{4}).*$/, '$1.$2'); // 小数点后最多保留4位

      // 限制整数部分最多9位
      newValue = newValue.match(/^\d{0,9}(\.\d{0,4})?/)[0];

      if (parseFloat(newValue) < 0) {
        newValue = '0';
      }

      this.formData.qualifiedNum = newValue;
    },
    onChangeUser(storeVals, row) {
      let newStr = ''
      if (row.length > 0) {
        let newArr = []
        let arrTwo = []
        for (let item of row) {
          newArr.push(item.id)
          arrTwo.push(item.realname)
        }
        if (newArr.length > 0) {
          newStr = newArr.join(',')
        }
        if (arrTwo.length > 0) {
          this.showPrincipalStr = arrTwo.join(',')
        }
      } else {
        newStr = ''
        this.showPrincipalStr = ''
      }
      this.$set(this.formData, 'userId', newStr)
    },
    // 不合格项填写
    selectNonconformingItem(item, index) {
      this.nonConformanceVisible = true
    },
    handleCancel() {
      this.nonConformanceVisible = false
    },

    // 确认不合格项的填写
    handleOk() {
      console
      let data = this.disqualificationData.filter((item) => item.nonconformityNum)
      if (data.length > 0) {
        this.formData.unqualifiedDtos = JSON.parse(JSON.stringify(data))
      }
      this.formData.unqualifiedQuantityNum = this.unqualifiedNumber
      this.reportNumPro = this.formData.unqualifiedQuantityNum + this.formData.qualifiedNum
      this.handleCancel()
    },
    async changeProcess(v, item) {
      this.formData.taskId = v
      let { result, code } = await processDetail({ id: v })
      if (code == 200) {
        this.formData.qualifiedNum =
          Number(result.planNum) - Number(result.reportNum) <= 0 ? 0 : Number(result.planNum) - Number(result.reportNum)
        this.numAll = this.formData.qualifiedNum
        this.formData.planProduceNum = result.planNum
        this.progressReportNum = result.reportNum
        this.planProduceNum = result.planNum
      }
    },
    outopenIt() {
      console.log(this.formData,'this.formData.orderCode')
      let par = {
        list: '/produceorder/produceOrderInfo/list',
        visible: true, //弹窗开启
        title: '生产工单', //标题名称
        multi: false, //是否多选
        columns: this.columnshand, //表格配置
        value: this.formData.showOrderId, //需要回显的数据，如：id:'12323213,321312312,321312312'
        valueKey: 'id', //需要拿到数据的key，如：id，userId等
        text: '工单编号', //回显的中文，如：'张三'
        textKey: 'id', //回显的中文key
        action: 'post',
        argument: {
          orderStatuss: '1',
        },
      }
      this.$refs.SaleSelect.getInit(par)
    },
    getSaleSelectValue(id, text, item) {
      console.log(id,item,'909')
      if (!id) {
        this.formData.orderCode = ''
        this.processesList = []
        this.formData.processId = ''
        return
      }
      this.Selectindex += 1 //重置组件去除表格默认勾选数据，让自己赋值的数据回显（重要！！！）
      this.formData.orderCode = item[0].orderCode
      this.formData.showOrderId = item[0].id
      this.formData.processId = ''
      this.formData.planProduceNum = ''
      this.formData.taskId = undefined
      this.progressReportNum = 0
      this.planProduceNum = 0
      this.processesList = item[0].produceOrderTaskVo
      this.goodsName = `${item[0].serialNumber}|${item[0].serialName}|${item[0].serialNumber}`
      this.formData.unitName = item[0].unitName || '-'
    },
    init() {
      initdata().then((res) => {
        if (res.code == 200) {
          this.ListBirth = res.result
        }
      })
      todaydata().then((res) => {
        if (res.code == 200) {
          this.todayList = res.result
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/public.less';

.pagebox {
  height: calc(100vh - 130px);

  .title {
    background: white;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-box {
      margin-left: 10px;
      padding: 5px 10px;
      font-size: 16px;
      font-weight: bold;
      color: #0079fe;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        left: 0;
        background: #0079fe;
        bottom: -4px;
      }
    }

    .title-tip {
      background-color: rgb(255, 240, 222);
      border-radius: 62px;
      padding: 4px 60px;
      font-size: 13px;
    }
    .icon-right {
      padding-top: 5px;
      margin-right: 20px;
    }

    .title-icon {
      font-size: 20px;
      color: #999;
    }
  }
}

.card {
  margin-top: 10px;
  height: calc(100% - 50px);
  display: flex;

  .card-right {
    background: white;
    width: 300px;
    height: 100%;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;

    .card-title {
      font-size: 20px;
      color: #333;
    }

    .card-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;

      .c-card {
        margin: 10px 0;
        border: 1px solid rgba(43, 133, 228, 1);
        padding: 0 5px;

        div {
          font-size: 14px;
          margin: 5px 0;
          color: black;
          white-space: pre-wrap;
        }

        .c-title {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }

  .card-centent {
    flex: 1;
    margin: 0 5px;
    background: white;
    height: 100%;
    padding: 5px 10px;
    position: relative;
    display: flex;
    flex-direction: column;

    .card-content {
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
      padding-bottom: 80px;
    }

    .card-title {
      font-size: 20px;
      color: #333;
    }

    .centent-btn {
      z-index: 10;
      width: 100%;
      bottom: 0;
      position: absolute;
      padding: 10px 0;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background: white;
    }
  }

  .card-left {
    background: white;
    width: 300px;
    height: 100%;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;

    .card-title {
      font-size: 20px;
      color: #333;
    }

    .card-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;

      .c-card {
        margin: 10px 0;
        border: 1px solid rgba(255, 153, 0, 1);
        padding: 0 5px;

        div {
          font-size: 14px;
          margin: 5px 0;
          color: black;
          white-space: pre-wrap;
        }

        .c-title {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
}
</style>
